<template>
  <div id="App">
    <ul class="layui-nav layui-bg-blue" lay-bar="disabled">
      <li class="layui-nav-item">
        <!--
        用来渲染一个链接的组件，该链接在被点击时会触发导航
          to（必选参数）：类型是string/location  to="/xxx"或者:to={path:"xxx"}
          tag 类型string，它的默认值是a标签。tag prop 类指定何种标签，同样它还是会监听点击，触发导航  tag="li"
          active-class 类型string 默认值: "router-link-active"设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置
          exact-active-class 类型: string 默认值: "router-link-exact-active"配置当链接被精确匹配的时候应该激活的 class。注意默认值也是可以通过路由构造函数选linkExactActiveClass 进行全局配置
          exact 类型: boolean 默认值: false按照这个规则，每个路由都会激活！想要链接使用 “exact 匹配模式”，则使用 exact 属性
          replace 类型: boolean 默认值: false 设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录
          append 类型: boolean 默认值: false 设置 append 属性后，则在当前 (相对) 路径前添加基路径
        -->
        <router-link to="/home">首页</router-link>
      </li>
      <li class="layui-nav-item">
        <router-link to="/login">登录</router-link>
      </li>
    </ul>
    <!--用于显示用户当前所处路由的组件-->
    <router-view></router-view>
  </div>
</template>

<style lang="less">

</style>
<script setup>
</script>